<template>
  <view class="root">
    <u-tabs :list="list" @click="tabChange"></u-tabs>
    <view class="content">
      <view class="content-inner" v-show="currentTabIndex == 0">
        <yy-scroll-view :static-params="staticParams" ref="scrllViewRef" request-url="/feedback/list"
          :auto-request="false">
          <template slot-scope="{list}">
            <view class="list-item" v-for="(item, index) in list" :key="index" @click="handleItem(item)">
              <view class="item-top">
                <view class="title-name">{{ item.problemType ? problemTypeEnum[item.problemType] : '暂无' }}</view>
                <view class="icon-right">
                  <view class="status-text">
                    {{problemStatusEnum[item.status] ||  '暂无'}}
                  </view>
                  <image class="arrow-right" :src="baseImgUrl + 'arrow-right-icon.png'"></image>
                </view>
              </view>
              <view class="item-content">
                {{item.content}}
              </view>
              <view class="item-time">
                上报时间:{{item.createTime}}
              </view>
            </view>
          </template>
        </yy-scroll-view>
      </view>
      <view class="content-inner" v-show="currentTabIndex == 1">
        <yy-scroll-view :static-params="staticParams1" ref="scrllViewRef1" request-url="/feedback/list"
          :auto-request="false">
          <template slot-scope="{list}">
            <view class="list-item" v-for="(item, index) in list" :key="index" @click="handleItem(item)">
              <view class="item-top">
                <view class="title-name">{{ item.problemType ? problemTypeEnum[item.problemType] : '暂无' }}</view>
                <view class="icon-right">
                  <view class="status-text">
                    {{problemStatusEnum[item.status] ||  '暂无'}}
                  </view>
                  <image class="arrow-right" :src="baseImgUrl + 'arrow-right-icon.png'"></image>
                </view>
              </view>
              <view class="item-content">
                {{item.content}}
              </view>
              <view class="item-time">
                上报时间:{{item.createTime}}
              </view>
            </view>
          </template>
        </yy-scroll-view>
      </view>
      <view class="content-inner" v-show="currentTabIndex == 2">
        <yy-scroll-view :static-params="staticParams2" ref="scrllViewRef2" request-url="/feedback/list"
          :auto-request="false">
          <template slot-scope="{list}">
            <view class="list-item" v-for="(item, index) in list" :key="index" @click="handleItem(item)">
              <view class="item-top">
                <view class="title-name">{{ item.problemType ? problemTypeEnum[item.problemType] : '暂无' }}</view>
                <view class="icon-right">
                  <view class="status-text">
                    {{problemStatusEnum[item.status] ||  '暂无'}}
                  </view>
                  <image class="arrow-right" :src="baseImgUrl + 'arrow-right-icon.png'"></image>
                </view>
              </view>
              <view class="item-content">
                {{item.content}}
              </view>
              <view class="item-time">
                上报时间:{{item.createTime}}
              </view>
            </view>
          </template>
        </yy-scroll-view>
      </view>
      <view class="content-inner" v-show="currentTabIndex == 3">
        <yy-scroll-view :static-params="staticParams3" ref="scrllViewRef3" request-url="/feedback/list"
          :auto-request="false">
          <template slot-scope="{list}">
            <view class="list-item" v-for="(item, index) in list" :key="index" @click="handleItem(item)">
              <view class="item-top">
                <view class="title-name">{{ item.problemType ? problemTypeEnum[item.problemType] : '暂无' }}</view>
                <view class="icon-right">
                  <view class="status-text">
                    {{problemStatusEnum[item.status] ||  '暂无'}}
                  </view>
                  <image class="arrow-right" :src="baseImgUrl + 'arrow-right-icon.png'"></image>
                </view>
              </view>
              <view class="item-content">
                {{item.content}}
              </view>
              <view class="item-time">
                上报时间:{{item.createTime}}
              </view>
            </view>
          </template>
        </yy-scroll-view>
      </view>
    </view>
    <view class="bottom">
      <u-button text="新增意见反馈" :custom-style="halfColorButton" @click="handleAdd"></u-button>
    </view>
  </view>
</template>

<script>
  import {
    navTo,
    halfColorButton,
    Toast,
    getOptionsParams,
    problemTypeEnum,
    problemStatusEnum
  } from '@/utils/util.js'
  import moment from '@/utils/moment'


  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        list: [{
          name: '全部',
        }, {
          name: '已接收',
        }, {
          name: '跟进中'
        }, {
          name: '已处理'
        }, ],
        halfColorButton,
        staticParams: {
          type: ''
        },
        staticParams1: {
          type: '0'
        },
        staticParams2: {
          type: '1'
        },
        staticParams3: {
          type: '2'
        },
        currentTabIndex: 0,
        problemTypeEnum,
        problemStatusEnum
      }
    },
    onLoad(options) {
      this.$refs.scrllViewRef.getList('init', this.staticParams)
      uni.$on('add-feedback', () => {
        this.$refs.scrllViewRef.getList('init', this.staticParams)
      })
    },
    onUnload() {
      uni.$off('add-feedback')
    },
    methods: {
      moment,
      handleAdd() {
        navTo({
          url: '/feedback/addIssue'
        })
      },
      tabChange({
        index
      }) {
        this.currentTabIndex = index
        console.log(this.currentTabIndex)
        if (index == 0) {
          this.$refs.scrllViewRef.getList('init', this.staticParams)
        } else if (index == 1) {
          this.$refs.scrllViewRef1.getList('init', this.staticParams1)
        } else if (index == 2) {
          this.$refs.scrllViewRef2.getList('init', this.staticParams2)
        } else if (index == 3) {
          this.$refs.scrllViewRef3.getList('init', this.staticParams3)
        }
      },
      handleItem(item) {
        navTo({
          url: '/feedback/feedbackDetail',
          params: {
            ...item
          }
        })
      }
    },
  }
</script>


<style>
  page {
    background: #F9F9F9;
  }
</style>
<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #F9F9F9;

    /deep/ .u-tabs {
      background: #fff;

      .u-tabs__wrapper__nav__line {
        background: linear-gradient(90deg, #51B1FF 0%, #1790F2 100%);
      }

      .u-tabs__wrapper__nav__item__text {
        font-weight: 500;
        font-size: 28rpx;
        color: #545454;
      }
    }

    .content {
      flex: 1;
      padding: 10rpx 15rpx;
      height: 0;

      .content-inner {
        width: 100%;
        height: 100%;
      }


      .list-item {
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 36rpx 46rpx;

        .item-top {
          display: flex;
          justify-content: space-between;
          margin-bottom: 26rpx;

          .title-name {
            font-weight: bold;
            font-size: 30rpx;
            color: #181818;
          }

          .icon-right {
            display: flex;
            align-items: center;

            .status-text {
              font-weight: 500;
              font-size: 24rpx;
              color: #2488F5;
            }

            .arrow-right {
              width: 11rpx;
              height: 19rpx;
              margin-left: 6rpx;
            }
          }
        }

        .item-content {
          font-weight: 400;
          font-size: 28rpx;
          color: #A1A1A1;
          margin-bottom: 26rpx;
        }

        .item-time {
          font-weight: 400;
          font-size: 26rpx;
          color: #AEAEAE;
        }
      }
    }

    .bottom {
      height: 120rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24rpx;

      /deep/.u-button__text {
        font-weight: bold;
        font-size: 32rpx;
        color: #2488F5;
      }
    }
  }
</style>